<template>
    <div class="padding20">
        <!--        -->
        <!--条件查询-->
        <div class="mContainer">
            <el-input placeholder="ID" v-model="queryParam.id" @keyup.enter.native="selectPage"
                      class="mItem w150" clearable/>
            <el-input placeholder="标题" v-model="queryParam.title" @keyup.enter.native="selectPage"
                      class="mItem w150  let10" clearable/>
            <el-select placeholder="隐藏状态" v-model="queryParam.hidden"
                       class="mItem w150 let10" clearable>
                <el-option label="展示" value="1"/>
                <el-option label="隐藏" value="2"/>
            </el-select>
            <el-select placeholder="关闭状态" v-model="queryParam.alwaysShow"
                       class="mItem w150 let10" clearable>
                <el-option label="不可关闭" value="1"/>
                <el-option label="可以关闭" value="2"/>
            </el-select>
            <el-tooltip content="查询" class="item" effect="dark" placement="top-start">
                <el-button @click="selectPage" class="mItem  let10"
                           type="primary" icon="el-icon-search"
                />
            </el-tooltip>
            <el-button @click="showInsert()" class="mItem let10" type="primary"
                       icon="el-icon-edit">新增
            </el-button>
            <el-button @click="showDelBatch()" class="mItem let10" type="primary"
                       icon="el-icon-delete">批量删除
            </el-button>
            <el-tooltip content="刷新缓存" class="item" effect="dark" placement="top-start">
                <el-button @click="refreshCache" class="mItem let10" type="primary"
                           icon="el-icon-refresh"/>
            </el-tooltip>
            <el-tooltip content="主动提交菜单信息到服务器（慎重使用）" class="item" effect="dark" placement="top-start">
                <el-button @click="showSubmitMenu()" class="mItem let10" type="primary"
                           icon="el-icon-upload"/>
            </el-tooltip>
        </div>
        <div class="mContainer">
            <el-input placeholder="PID" v-model="queryParam.pid" @keyup.enter.native="selectPage"
                      class="mItem w150" clearable/>
            <el-input placeholder="排序" v-model="queryParam.sort" @keyup.enter.native="selectPage"
                      class="mItem w150 let10" clearable/>
            <el-input placeholder="路径" v-model="queryParam.path" @keyup.enter.native="selectPage"
                      class="mItem w150 let10" clearable/>
            <el-input placeholder="重定向" v-model="queryParam.redirect" @keyup.enter.native="selectPage"
                      class="mItem w150 let10" clearable/>
        </div>
        <!--        -->
        <!--表格数据-->
        <el-table :data="tableData" border fit highlight-current-row style="width: 100%;"
                  @selection-change="selectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" label="序号" width="80"/>
            <el-table-column label="ID" width="110" prop="id"/>
            <el-table-column label="PID" width="110" prop="pid"/>
            <el-table-column label="标题" width="130" prop="title"/>
            <el-table-column label="路径" width="130" prop="path"/>
            <el-table-column label="重定向" width="130" prop="redirect"/>
            <el-table-column align="center" label="图标" width="80" prop="icon">
                <template slot-scope="scope">
                    <span> <svg-icon :name="scope.row.icon"/></span>
                </template>
            </el-table-column>
            <el-table-column label="隐藏状态" width="80" prop="hidden">
                <template slot-scope="scope">
                    <span>{{ scope.row.hidden|isHidden }}</span>
                </template>
            </el-table-column>
            <el-table-column label="类型" width="80" prop="type">
                <template slot-scope="scope">
                    <span>{{ scope.row.type|menuType }}</span>
                </template>
            </el-table-column>
            <el-table-column label="关闭状态" width="80" prop="hidden">
                <template slot-scope="scope">
                    <span>{{ scope.row.alwaysShow | isAlwaysShow }}</span>
                </template>
            </el-table-column>
            <el-table-column label="排序" width="80" prop="sort"/>
            <el-table-column label="操作" min-width="250" align="center">
                <template slot-scope="scope">
                    <el-button
                            type="info" plain
                            size="mini"
                            @click="showInfo(scope.$index, scope.row)">详情
                    </el-button>
                    <el-button
                            type="success" plain
                            size="mini"
                            @click="showEditor(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            type="danger" plain
                            size="mini"
                            @click="showDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        -->
        <!--分页插件-->
        <Pagination @pagination="selectPage"
                    v-show="queryParam.pages>0"
                    :total-data-num="queryParam.total"
                    :current-page="queryParam.current"
                    :page-size="queryParam.size"/>
        <!--        -->
        <!--消息 Dialog-->
        <el-dialog :title="dialogMsg.title" :visible.sync="dialogMsg.isShow" width="30%" center>
            <span v-html="dialogMsg.content"></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogMsg.isShow = false">取 消</el-button>
                <el-button type="primary" v-show="dialogMsg.type=='deleteBatch'"
                           @click="startDelBatch">确 定</el-button>
                <el-button type="primary" v-show="dialogMsg.type=='submitMenu'"
                           @click="submitMenu()">确 定</el-button>
                <el-button type="primary" plain @click="startDelBatch"
                           v-show="dialogMsg.type=='delete'" size="medium">确 定
                </el-button>
            </span>
        </el-dialog>
        <!--        -->
        <!--详情 Dialog-->
        <el-dialog :title="dialogData.title" :visible.sync="dialogData.openInfo"
                   :close-on-press-escape="false" :close-on-click-modal="false"
                   style="margin-bottom: 10px;" width="60%">
            <el-form label-width="120px" style="margin-left: 30px;margin-right: 60px;">
                <el-form-item label="ID">
                    <el-input :value="mFormData.id" placeholder="暂无数据" readonly/>
                </el-form-item>
                <el-form-item label="PID">
                    <el-input :value="mFormData.pid" placeholder="暂无数据" readonly/>
                </el-form-item>
                <el-form-item label="路径">
                    <el-input :value="mFormData.path" placeholder="暂无数据" readonly/>
                </el-form-item>
                <el-form-item label="重定向">
                    <el-input :value="mFormData.redirect" placeholder="暂无数据" readonly/>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input :value="mFormData.title" placeholder="暂无数据" readonly/>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input :value="mFormData.icon" placeholder="暂无数据" readonly/>
                </el-form-item>
                <el-form-item label="隐藏状态">
                    <el-input :value="mFormData.hidden | isHidden" placeholder="暂无数据" readonly/>
                </el-form-item>
                <el-form-item label="关闭状态">
                    <el-input :value="mFormData.alwaysShow | isAlwaysShow" placeholder="暂无数据" readonly/>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input :value="mFormData.sort" placeholder="暂无数据" readonly/>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input :value="mFormData.createTime" placeholder="暂无数据" readonly/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogData.openInfo = false">取 消</el-button>
            </div>
        </el-dialog>
        <!--        -->
        <!--编辑-新增 Dialog-->
        <el-dialog :title="dialogData.title" :visible.sync="dialogData.openEditorOrAdd"
                   :close-on-press-escape="false" :close-on-click-modal="false"
                   style="margin-bottom: 10px;" width="60%">
            <el-form :rules="mRules" :model="mFormData" ref="mFormData" label-width="120px"
                     style="margin-left: 30px;margin-right: 60px;">
                <el-form-item label="图标" prop="icon">
                    <el-input v-model="mFormData.icon" placeholder="暂无数据">
                        <svg-icon slot="prepend" name="example"/>
                        <el-button slot="append" icon="el-icon-search"/>
                    </el-input>
                </el-form-item>
                <el-form-item label="父菜单" prop="pid">
                    <el-input v-model="mFormData.pid" placeholder="暂无数据">
                        <!--                        <template slot="prepend">{{mFormData.pName}}</template>-->
                        <el-button @click="searchMenu" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="访问路径" prop="path">
                    <el-input v-model="mFormData.path" placeholder="暂无数据"/>
                </el-form-item>
                <el-form-item label="重定向地址" prop="redirect">
                    <el-input v-model="mFormData.redirect" placeholder="暂无数据"/>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="mFormData.title" placeholder="暂无数据"/>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number placeholder="排序" v-model="mFormData.sort"  :step="1" :min="1"/>
                </el-form-item>
                <el-form-item label="隐藏状态" prop="hidden">
                    <el-select v-model="mFormData.hidden" placeholder="请选择">
                        <el-option label="展示" value="1"/>
                        <el-option label="隐藏" value="2"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="关闭状态" prop="alwaysShow">
                    <el-select v-model="mFormData.alwaysShow" placeholder="请选择">
                        <el-option label="不可关闭" value="1"/>
                        <el-option label="可以关闭" value="2"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!--编辑按钮-->
                <el-button @click="cancelUpdate" plain
                           v-show="dialogData.type=='editor'" size="medium">还 原
                </el-button>
                <el-button type="primary" plain @click="startUpdate()"
                           v-show="dialogData.type=='editor'" size="medium">确 定
                </el-button>
                <!--添加按钮-->
                <el-button @click="dialogData.openEditorOrAdd=false"
                           v-show="dialogData.type=='add'" size="medium">取 消
                </el-button>
                <el-button type="primary" plain @click="startAdd()"
                           v-show="dialogData.type=='add'" size="medium">确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import Pagination from "@/components/Pagination/Pagination.vue";
    import BaseSysVue from "@/utils/BaseSysVue";
    import {API} from "@/aconst/API";
    import {successMsg} from "@/utils/message";
    import $http from "@/http";
    import {routerList} from "@/router/router_const";
    import {compareProps, menuTreeToArray} from "@/utils/math";
    import {refreshMenu} from "@/utils/userKit";

    @Component({
        name: 'Menu',
        components: {
            Pagination
        },
    })
    export default class Menu extends BaseSysVue {
        mFormData: any = {
        };
        mOptions = [{label: "展示", value: "1"}, {label: "隐藏", value: "2"}];
        mRules = {
            sort: [{required: true, message: '不能为空', trigger: 'blur'}],
        };

        //初始化
        mounted() {
            this.selectPage(null);
        }

        //查询分页
        selectPage(pageUpdate: any) {
            this.queryParam.pageApi = API.sysMenuPage;
            this.basePage(pageUpdate);
        }

        //刷新缓存
        refreshCache() {
            return $http.post(API.sysRefreshRoleMenu, {})
                .then((res: any) => {
                    if (res.success) {
                        setTimeout(() => {
                            successMsg("操作成功");
                            this.dialogData.openEditorOrAdd = false;
                            this.dialogMsg.isShow = false;
                            this.tableSelectIds = [];
                            this.basePage(null);
                            refreshMenu(res.data);
                            window.location.reload();
                        }, 100);
                        return res;
                    }
                });
        }

        //执行添加操作
        startAdd() {
            this.baseStartAdd(API.sysMenuInsert)
        }

        //执行删除操作
        startDelBatch() {
            this.baseStartDelBatch(API.sysMenuDel)
        }

        //执行修改操作
        startUpdate() {
            this.baseStartUpdate(API.sysMenuUpdate)
        }

        //展示删除Dialog
        showDelete(index: any, row: any) {
            this.baseShowDelete(index, row, "通知", "delete")
        }

        //展示批量删除Dialog
        showDelBatch() {
            this.baseShowDeleteBatch()
        }

        //展示详情
        showInfo(index: any, row: any) {
            this.baseShowDialogData(index, row, "info", "详情");
        }

        //展示添加Dialog
        showAdd() {
            this.mFormData = {};
            this.mFormData.hidden = "1";
            this.mFormData.alwaysShow = "2";
            this.baseShowDialogData(0, this.mFormData, "add", "详情");
        }

        //展示编辑Dialog
        showEditor(index: any, row: any) {
            this.baseShowDialogData(index, row, "editor", "编辑");
        }

        //监听复选框事件
        selectionChange(val: any) {
            this.baseSelectionChange(val);
        }

        //还原修改的数据
        cancelUpdate() {
            this.baseCancelUpdate()
        }

        //提交带单信息到服务端
        submitMenu() {
            let newArray: any = [];
            let s = JSON.stringify(routerList);
            let allMenu = menuTreeToArray(JSON.parse(s), []).sort(compareProps('path'));
            for (let menu of allMenu) {
                if (menu.meta.title) menu.title = menu.meta.title;
                if (menu.meta.icon) menu.icon = menu.meta.icon;
                if (menu.meta.affix) menu.affix = menu.meta.affix;
                if (menu.meta.alwaysShow) menu.alwaysShow = menu.meta.alwaysShow;
                if (menu.meta.hidden) menu.hidden = menu.meta.hidden;
                if (menu.meta.type) menu.type = menu.meta.type;
                if (menu.meta.name) menu.name = menu.meta.name;
                if (menu.meta.sort) menu.sort = menu.meta.sort;
                if (menu.meta.parentPath) menu.parentPath = menu.meta.parentPath;
                if (menu.meta.buttonParam) menu.buttonParam = menu.meta.buttonParam;
                newArray.push(menu)
            }
            $http.post(API.sysMenuSubmit, newArray)
                .then((res: any) => {
                    if (res.success) {
                        setTimeout(() => {
                            successMsg("操作成功");
                            this.dialogMsg.isShow = false;
                            this.tableSelectIds = [];
                            this.basePage(null);
                        }, 100);
                    }
                });
        }

        showSubmitMenu() {
            this.baseShowDialog("submitMenu", "通知", "确认提交前台菜单到服务端？");
        }

        searchMenu() {


        }
    }

</script>

<style scoped>

</style>
